:root,:root[theme-mode="light"] {
  --td-brand-color-light: var(--td-brand-color-1);
  --td-brand-color-focus: var(--td-brand-color-2);
  --td-brand-color-disabled: var(--td-brand-color-3);
  --td-brand-color-hover: var(--td-brand-color-3);
  --td-brand-color: var(--td-brand-color-4);
  --td-brand-color-active: var(--td-brand-color-5);
  --td-brand-color-1: #e4f9e9;
  --td-brand-color-2: #c8f2d7;
  --td-brand-color-3: #94dab2;
  --td-brand-color-4: #45c58b;
  --td-brand-color-5: #33a371;
  --td-brand-color-6: #008857;
  --td-brand-color-7: #006c44;
  --td-brand-color-8: #005333;
  --td-brand-color-9: #003b23;
  --td-brand-color-10: #002515;
}

:root[theme-mode="dark"] {
  --td-brand-color-light: var(--td-brand-color-1);
  --td-brand-color-focus: var(--td-brand-color-2);
  --td-brand-color-disabled: var(--td-brand-color-3);
  --td-brand-color-hover: var(--td-brand-color-5);
  --td-brand-color: var(--td-brand-color-6);
  --td-brand-color-active: var(--td-brand-color-7);
  --td-brand-color-1: #33a37120;
  --td-brand-color-2: #003b23;
  --td-brand-color-3: #005333;
  --td-brand-color-4: #006c44;
  --td-brand-color-5: #008857;
  --td-brand-color-6: #33a371;
  --td-brand-color-7: #45c58b;
  --td-brand-color-8: #94dab2;
  --td-brand-color-9: #c8f2d7;
  --td-brand-color-10: #e4f9e9;
}